<template>
	<view class="container">
		<img class="bg-img" src="https://dnsverify.pfmoto.com/appstatic/img/my/bg-img.jpg" alt="">
		<u-navbar
			title="投票详情"
			@rightClick="share"
			:autoBack="true"
			bgColor="transparent"
		>
			<view slot="right" style="display: flex;align-items: center;justify-content: center;">
				<image style="width: 20px;height: 20px;" src="https://dnsverify.pfmoto.com/appstatic/community/share.png" mode=""></image>
			</view>
		</u-navbar>
		<image class="top-image" :src="voteCoverImg" @click="previewImage(voteCoverImg)"></image>
		
		<view class="content">
			<view class="top-message">
				<view class="title">{{title}}</view>
				<view class="endTime">
					<image style="width: 17px;height: 17px;" src="../static/icon-time.png" mode=""></image>
					<view class="endTime-text">{{endTime}}</view>
				</view>
				<view class="range">
					<uni-icons style="padding-left: 1px;" type="info-filled" size="16" color="#EA5404"></uni-icons>
					<view class="range-text">{{range}}</view>
				</view>
			</view>
			
			<view class="vote-detail">
				<view class="detail-title">投票详情</view>
				<view class="jyf">
					<jyf-parser></jyf-parser>
				</view>
			</view>
			
			<view class="vote-statistics">
				<view class="vote-statistics-top">
					<view class="statistics-title">投票统计</view>
					<view class="times">{{times}}</view>
				</view>
				<u-radio-group 
					v-if="hasVoted"
				    v-model="radioValue"
				    iconPlacement="left"
					placement="column"
					size='16px'>
					<u-radio 
						style="height: 58px;border-bottom: #E5E5E5 solid 1px;"
						v-for="(item,index) in radioList"
						activeColor="#EA5404" 
						:label="item.content"
						:name="item.content"
						>
					</u-radio>
				</u-radio-group>
				
				<view v-if="!hasVoted" class="vote-result" v-for="(item,index) in radioList">
					<view class="line-name">{{item.content}}</view>
					<view class="line" >
						<u-line-progress 
							:percentage="item.percentage"
							activeColor="#EA5404">
						</u-line-progress>
						<view class="percentage">{{item.percentage}}%</view>
						<view class="amount">{{item.amount}}票</view>
					</view>
				</view>
				
				<view class="button">
					<button @click="vote" class="register-button" hover-class="btn-style-hover" plain="true">
						参与投票
					</button>
				</view>
			</view>
			
			<view class="people">
				<view class="people-title">已有134人参与</view>
				<view class="people-row">
					<view class="avatar-group">
						<image class="avatar" src="" mode=""></image>
						<image style="left:-10px" class="avatar" src="" mode=""></image>
						<image style="left:-20px" class="avatar" src="" mode=""></image>
						<image style="left:-30px" class="avatar" src="" mode=""></image>
						<image style="left:-40px" class="avatar" src="" mode=""></image>
					</view>
					<uni-icons style="padding-left: 1px;" type="more-filled" size="16" color="#3D3A3A"></uni-icons>
					<uni-icons style="padding-left: 1px;" type="forward" size="16" color="#ADB0AE"></uni-icons>
				</view>
			</view>
		</view>
		
		<u-popup :show="show">
			<view class="popup">
				<view class="action-wraper">
					<text style="visibility: hidden;">确定</text>
					<text>分享到</text>
					<image @click="show = !show"
						src="https://dnsverify.pfmoto.com/appstatic/community/x.png" mode=""></image>
				</view>
				<view class="share-wraper">
					<view class="item" @click="shareType(1)">
						<image src="https://dnsverify.pfmoto.com/appstatic/community/share-1.png"
							mode="">
						</image>
						<text>微信</text>
					</view>
					<view class="item" @click="shareType(2)">
						<image src="https://dnsverify.pfmoto.com/appstatic/community/share-2.png"
							mode="">
						</image>
						<text>朋友圈</text>
					</view>
					<view class="item" @click="shareType(3)">
						<image src="https://dnsverify.pfmoto.com/appstatic/community/share-3.png"
							mode="">
						</image>
						<text>微博</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import titlebar from '@/components/titlebar/titlebar'
	import parser from "@/components/jyf-parser/jyf-parser";
	const app = getApp();
	const util = require("@utils/util.js");
	const network = require("@manager/network-manager.js");
	export default{
		components: {
			titlebar,
			"jyf-parser": parser
		},
		data(){
			return {
				voteCoverImg:'https://dnsverify.pfmoto.com/appstatic/community/article-cover-default.png',
				title:'投票活动标题',
				endTime:'活动结束时间',
				range:'活动参与范围',
				radioList:[
					// {
					// 	value:1,
					// 	content:'性价比高',
					// 	percentage:'25',
					// 	amount:'25',
					// },
					// {
					// 	value:2,
					// 	content:'性能出众',
					// 	percentage:'25',
					// 	amount:'25',
					// },
					// {
					// 	value:3,
					// 	content:'颜值拉风',
					// 	percentage:'25',
					// 	amount:'25',
					// },
					// {
					// 	value:4,
					// 	content:'安全可靠',
					// 	percentage:'25',
					// 	amount:'25',
					// },
				],
				id:'',
				radioValue:'',
				times:'100次浏览',
				hasVoted:false,
				show:false,
				
			}
		},
		onShow:function(){
			this.getList()
		},
		methods:{
			getList(){
				var uri='http://api.demo.runlin.cn/mock/11/cocreate/list'
				var params={
					
				}
				network.get(uri, params, 'form').then(res => {
					if(res.code==200){
						this.radioList=res.data.list
						this.id=res.data.id
					}else{
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
					console.error(res);
				});
			},
			/**
			 * 点击投票 
			 */
			vote(){
				var uri=''
				var params={
					
				}
				network.post(uri, params, 'json').then(res=>{
					if(res.code==200){
						this.hasVoted=true
					}else{
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
					console.error(res);
				});
			},
			/**
			 * 分享 
			 */
			share(){
				this.show=true
			},
			shareType(type){
				var that=this
				var imgurl="https://pfmotortest.hb4oss.xstore.ctyun.cn/appstatic/community/share.jpg"
				if(type==1){//微信朋友
					uni.share({
						provider:'weixin',
						scene:'WXSceneSession',
						type: 5,//分享形式
						imageUrl:imgurl,
						title:'投票详情',
						miniProgram:{
							id:'gh_c784b84e778d',//微信小程序原始id
							path:'module_community/cocreate/vote?id='+that.id,
							type: 0,
							webUrl: 'https://www.pfmoto.com/app'//兼容低版本的网页链接
						},
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
						}
					})
				}else if(type==2){//微信朋友圈
					uni.share({
						provider: "weixin",
						scene: "WXSceneTimeline",
						type: 0,
						href: "https://www.pfmoto.com/app",
						summary: '欢迎体验派方机车',
						imageUrl: url,
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
						}
					})
				}else if(type==3){//微博
					uni.share({
						provider:"sinaweibo",
						title:'欢迎下载派方APP',
						summary:this.title,
						href: 'https://www.pfmoto.com/app',
						type: 0,
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
						}
					})
				}
			},
			/**
			 * 预览图片  
			 */
			previewImage: function(img) {
				//#ifndef MP-WEIXIN
				wx.previewImage({
					current: 0,
					urls: [img],
				});
				//#endif
				uni.previewImage({
					current: 0,
					urls: [img]
				});
			},
		}
	}
</script>

<style>
	.container {
		width: 100vw;
		box-sizing: border-box;
	}
	.bg-img {
		position: fixed;
		height: 100%;
		width: 100%;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.top-image {
		width: 100%;
		height: 500rpx;
	}
	.title {
		font-family: 'Noto Sans SC';
		font-style: normal;
		font-weight: 700;
		font-size: 16px;
		line-height: 23px;
		display: flex;
		align-items: center;
		color: #3D3A3A;
		padding-bottom: 16px;
	}
	.content {
		padding: 16px 16px 0px 16px;
	}
	.top-message {
		display:flex;
		flex-direction: column;
	}
	.endTime {
		display:flex;
		flex-direction: row;
		align-items: center;
	}
	.endTime-text {
		font-family: 'Arial';
		font-style: normal;
		font-weight: 400;
		font-size: 13px;
		line-height: 15px;
		text-align: center;
		color: #3D3A3A;
		padding-left: 7px;
	}
	.range {
		display:flex;
		flex-direction: row;
		align-items: center;
		padding-top: 11px;
	}
	.range-text {
		font-family: 'Noto Sans SC';
		font-style: normal;
		font-weight: 400;
		font-size: 13px;
		line-height: 19px;
		display: flex;
		align-items: center;
		color: #EA5404;
		padding-left: 7px;
	}
	.vote-detail {
		padding-top: 34px;
	}
	.detail-title {
		font-family: 'Noto Sans SC';
		font-style: normal;
		font-weight: 700;
		font-size: 14px;
		line-height: 20px;
		display: flex;
		align-items: center;
		color: #000000;
	}
	.vote-statistics {
		display:flex;
		flex-direction: column;
		padding-top: 30px;
	}
	.vote-statistics-top {
		height: 30px;
		display:flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.statistics-title {
		font-family: 'Noto Sans SC';
		font-style: normal;
		font-weight: 700;
		font-size: 14px;
		line-height: 20px;
		display: flex;
		align-items: center;
		color: #000000;
	}
	.times {
		font-family: 'Noto Sans SC';
		font-style: normal;
		font-weight: 400;
		font-size: 12px;
		line-height: 17px;
		display: flex;
		align-items: center;
		text-align: right;
		color: #ADB0AE;
	}
	.vote-result {
		height: 64px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.line-name {
		
	}
	.line {
		display: flex;
		align-items: center;
	}
	.percentage {
		padding-left: 10px;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 14px;
		line-height: 20px;
		display: flex;
		align-items: center;
		color: #ADB0AE;
	}
	.amount {
		padding-left: 10px;
	}
	.button {
		padding: 8px 8px 0px 8px;
	}
	.register-button {
		line-height: 80rpx;
		height: 42px;
		margin: auto;
		border: none;
		border-radius: 2px;
		font-size: 16px;
		font-weight: 400;
	}
	button.register-button[plain] {
		border: 0;
		background-color: #EA5404;
		color: #ffffff;
		font-size: 16px;
		font-weight: 400;
	}
	.people {
		padding-top: 21px;
	}
	.people-title {
		font-family: 'Noto Sans SC';
		font-style: normal;
		font-weight: 600;
		font-size: 14px;
		line-height: 20px;
		display: flex;
		align-items: center;color: #000000;
	}
	.people-row {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding-top:10px;
		padding-bottom:10px

	}
	.avatar-group {
		display: flex;
		justify-content: center;
	}
	.avatar {
		width: 42px;
		height: 42px;
		border-radius: 50%;
		background-color: #000000;
		border:#ffffff solid 2px;
	}
	.action-wraper {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 20rpx;
	}
	
	.action-wraper text {
		font-size: 32rpx;
		font-weight: 600;
		color: #3d3a3a;
	}
	
	.action-wraper image {
		width: 48rpx;
		height: 48rpx;
	}
	.share-wraper {
		display: flex;
	
		justify-content: space-around;
		padding: 80rpx;
	}
	
	.share-wraper .item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.share-wraper .item image {
		width: 50rpx;
		height: 50rpx;
		margin-bottom: 20rpx;
	}
</style>